{% extends "base.html" %}

{% block content %}
<div class="container-fluid p-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h5>产品管理</h5>
        <button class="btn btn-primary">
            <i class="fa fa-plus me-1"></i> 添加产品
        </button>
    </div>

    <!-- 产品列表 -->
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card h-100 border rounded-lg overflow-hidden">
                <img src="https://picsum.photos/id/26/400/200" class="card-img-top" alt="产品图片">
                <div class="card-body">
                    <h6 class="card-title">无线蓝牙耳机</h6>
                    <p class="card-text text-secondary text-sm mb-2">主动降噪 · 长续航 · 高清通话</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-primary fw-bold">¥299</span>
                        <div>
                            <button class="btn btn-sm btn-info me-1">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 border rounded-lg overflow-hidden">
                <img src="https://picsum.photos/id/96/400/200" class="card-img-top" alt="产品图片">
                <div class="card-body">
                    <h6 class="card-title">智能手表</h6>
                    <p class="card-text text-secondary text-sm mb-2">心率监测 · 运动模式 · 防水</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-primary fw-bold">¥599</span>
                        <div>
                            <button class="btn btn-sm btn-info me-1">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card h-100 border rounded-lg overflow-hidden">
                <img src="https://picsum.photos/id/28/400/200" class="card-img-top" alt="产品图片">
                <div class="card-body">
                    <h6 class="card-title">便携式充电宝</h6>
                    <p class="card-text text-secondary text-sm mb-2">20000mAh · 双向快充 · 轻薄</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-primary fw-bold">¥129</span>
                        <div>
                            <button class="btn btn-sm btn-info me-1">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 更多产品卡片... -->
    </div>
</div>
{% endblock %}